<template>
	<!-- 进行中列表 start -->
	<view class="flex-column goods-container">
		<view class="flex-row align-center p_x5 p_y10">
			<view class="flex1">
				<uni-segmented-control class="flex-shrink" :current="current" :values="items" style-type="button"
					active-color="#18bc37" @clickItem="onClickItem" />
			</view>
			<view class="flex1 flex-row justify-end">
				<uni-tag :inverted="true" text="筛选" class="m_r5" />
				<uni-tag :inverted="true" text="..." />
			</view>
		</view>

		<!-- 开桌记录 start -->
		<TableItem @click="goToDetail(item)" @onInit="onInitData()" :data="item" v-for="(item,i) of lists" :key="i" />
		<!-- 开桌记录 end -->

	</view>
	<!-- 进行中列表 end -->
</template>

<script>
	import TableItem from "@/myComponents/tableItem/TableItem.vue"
	import Config from "@/vars/Config.js"
	import {
		TableTypesEnum
	} from "@/vars/TableTypes.js"
	import Table from "../../api/Table.js"
	import {
		mapState
	} from 'vuex';
	import {
		toast,
		isEmpty,
		deepClone,
		navigateTo,
	} from "../../utils/helpers.js"
	export default {
		components: {
			TableItem
		},
		data() {
			return {
				items: ['全部', '进行中', '已结束'],
				current: 0,
				counts: {
					countNums: 0,
					counts: 0,
					draws: 0,
					lostCounts: 0,
					losts: 0,
					winCounts: 0,
					wins: 0,
				},
				isEndPage: false,
				lists: [], // 商品列表
				searchParams: {
					page: 1, // 当前分页数
					type: '', // 模式 多人模式，单人，计分模式
					win: "", // 1赢 2输 3平居
					status: 1, // 状态：1全部 2进行中 3已完成
				}
			}
		},
		computed: {
			...mapState("user", [
				'userInfo',
			]),

		},
		async onShow() {
			await this.$store.dispatch("user/getToken");
			this.onInitData()
		},
		onReachBottom() {
			this.onInitData(this.searchParams.page + 1)
		},
		onPullDownRefresh() {
			this.onInitData(1)
		},
		onShareAppMessage() {
			const shareObj = {
				title: Config.appName, // 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index', // 默认是当前页面，必须是以‘/’开头的完整路径
				// 　　　　imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},

			};
			return shareObj
		},
		methods: {
			navigateTo,
			goToDetail(item) {
				switch (item.type) {
					case TableTypesEnum.mult:
						navigateTo('/pages/list/multInfo', {
							id: item.id
						})
						break;
					case TableTypesEnum.single:
						navigateTo('/pages/list/singleInfo', {
							id: item.id
						})
						break;
					case TableTypesEnum.score:
						navigateTo('/pages/list/scoreInfo', {
							id: item.id
						})
						break;
				}

			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.searchParams.status = e.currentIndex + 1;
					this.onInitData(1)
				}
			},
			// 获取进行中的列表
			async onInitData(page) {
				const parmas = deepClone(this.searchParams)
				if (page) {
					if (this.isEndPage) {
						return
					}
					parmas.page = page;
				}
				try {
					const data = await Table.page(parmas);
					this.counts = data.count || {};
					const report = data.report || {};
					const lists = report.data || [];
					if (parmas.current_page === 1) {
						this.lists = lists;
					} else {
						this.lists = {
							...this.lists,
							...lists,
						};
					}

					this.searchParams.page = parmas.current_page;
					this.isEndPage = report.last_page <= report.current_page;
				} catch (e) {
					toast(e.message)
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header-bg {
			background-color: $primayColor;
			width: 100%;
			position: absolute;
			// top: var(--status-bar-height);
			height: $headerBgHeight;
			z-index: -999;
			border-radius: 0 0 $headerBgRadius $headerBgRadius;
		}


		.swiper-container {
			width: 100%;
			padding-top: 18rpx;

			.swiper {
				width: 720rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.image {
					width: 100%;
					border-radius: 10rpx;
					height: 100%;
				}
			}
		}

		.menu-container {
			// padding-top: 20rpx;

			.grid {
				display: flex;
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;

				.grid-item {}
			}

			.menu-item {
				.icon {
					width: 104rpx;
					height: 104rpx;
				}

				.text {
					font-size: 26rpx;
					color: $textBlock;
				}
			}
		}

		.segmented-container {
			.segmented {}
		}

		.tags-coantainer {
			.tags {
				width: 650rpx;

			}

		}

		.goods-container {
			padding: 20rpx 20rpx;

		}

		.tools {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx;
			padding-top: 0;

			.bg-image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}

			.item {
				flex: 1;
				padding: 10rpx;

				.section {
					height: 150rpx;
					position: relative;
					padding: 10rpx 0;

					.label {
						position: absolute;
						top: 20rpx;
						left: 0;
						right: 0;
						color: #FFFFFF;
						font-size: 32rpx;
						text-align: center;
					}

					.value {
						position: absolute;
						top: 50rpx;
						height: calc(100% - 50rpx);
						botton: 0;
						left: 0;
						right: 0;
						color: #FFFFFF;
						font-size: 48rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
					}

				}
			}


		}


	}
</style>
